<template>
	<Modal v-model="modal" @on-ok="ok('form')" @on-cancel="cancel('form')" :loading="loading">
		<IForm :model="form" ref="form" :label-width="100" :rules="formRule" >
			<IInput v-model="form.id" class="hide" />
	        <FormItem prop="name" label="名称">
	            <IInput v-model="form.name" size="large" placeholder="请填写名称" />
	        </FormItem>
	       	<FormItem prop="link" label="链接">
	            <IInput v-model="form.link" size="large" placeholder="请填写链接" />
	        </FormItem>
			<FormItem prop="pic" label="图片">
	            <UploadPic ref="uploadpic" :callback="picCallBack"></UploadPic>
	        </FormItem>
	    </IForm>
	</Modal>
</template>
<script>

	import Modal from 'iview/src/components/modal';
    import Form from 'iview/src/components/form';
    import Input from 'iview/src/components/input';
    import Button from 'iview/src/components/button';

    import Axios from 'admin/config/axios';
    import UploadPic from 'admin/components/common/uploadpic';
	export default {
		components:{
            Modal,
            'IInput' : Input,
			'IForm' : Form,
			'FormItem' : Form.Item,
			'IButton' : Button,
			UploadPic,
        },
        data () {
            return {
                modal: false,
                loading : true,
                form :{
					id : 0,
					name : '',
					link : '',
					pic : '',
                },
                formRule : {
	                pic: [
	                    { required: true, message: '请上传图片' }
	                ],
	                link: [
	                    { type:'url', message: '请填写格式正确的链接地址' }
	                ],
	            },
            }
        },
        methods: {
        	picCallBack(data){
        		if(data.length==0){
        			this.form.pic = '';
        		}else{
        			this.form.pic = data[0]['url'];
        		}
        		
        	},
            changeLoading(){
	            this.loading = false;
	            this.$nextTick(() => {
	              this.loading = true;
	            });
	        },
        	ok(name){
        		this.$refs[name].validate(valid => {
        			if (!valid) {this.changeLoading();return false;}

        			Axios.Configs.Banner.Update(this.form)
		            .then(res =>{
		            	this.changeLoading();
		            	if(!res) return false;
		                this.modal = false;
		                this.$refs[name].resetFields();
		                this.$emit('resetTable');
		            })
		            .catch(error =>{
		                this.$Message.error(error);
		            })
        		})
        	},
        	cancel(name){
        		this.$refs[name].resetFields();
        	},
        },
        watch :{
        	modal(newValue,oldVue){
        		this.$refs.uploadpic.pics = [];
        		if(!newValue){
        			this.form.id = 0;
        			this.form.name = '';
        			this.form.link = '';
        			this.form.pic = '';
        		}
        	},
        	'form.pic':{
        		handler:function(val,oldVal){
        			if(oldVal=='' && val!=''){
        				this.$refs.uploadpic.pics = [];
        				this.$refs.uploadpic.pics.push({url:val});
        			}
        		},
        		deep:true
        	}
        }
    }
</script>